<template>
  <van-popup
    :show="visible"
    :close-on-click-overlay="false"
    round
    closeable
    close-on-popstate
    safe-area-inset-bottom
    position="bottom"
    close-icon-position="top-left"
    class="c-area"
    @open="init"
    @close="cancel"
  >
    <div class="confirm-box">
      <span v-if="cascader" class="clear" @click="clear">清除</span>
      <span class="confirm" @click="confirm">确定</span>
    </div>
    <div v-if="loading" class="load-box">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <van-cascader
      v-else
      v-model="cascader"
      :title="title"
      :options="data"
      :closeable="false"
      :field-names="{text: 'name', value: 'code', children: 'children'}"
      :active-color="activeColor"
      @change="change"
      @finish="finish" />
  </van-popup>
</template>
<script>
import { defineComponent, ref, toRefs, toRaw } from 'vue'
export default defineComponent({
  name: 'MArea',
  emits: ['update:show', 'update:value', 'change', 'finish'],
  props: {
    value: {
      type: Array,
    },
    visible: {
      type: Boolean,
    },
    title: {
      type: String,
    },
    // data: {
    //   type: Array,
    //   default: () => []
    // },
    activeColor: {
      type: String,
      default: '#1989fa'
    }
  },
  setup(props, { emit }) {
    const { value, title, visible } = toRefs(props)

    const loading = ref(false)
    const data = ref([])
    const cascader = ref('')
    const res = ref([]) // 临时结果
    const result = ref([]) // 双向绑定

    const init = async () => {
      if (!data.value.length) {
        loading.value = true
        const { data: response } = await useFetch('/api/common/getProvinces')
        loading.value = false
        const { data: provinces } = response.value
        data.value = JSON.parse(JSON.stringify(provinces).replace(/,"children":\[]/g, ''))
      }
    }

    if (value.value) {
      cascader.value = toRaw(value.value).map(ret => ret.name).join('/')
      // console.log(cascader.value, ']')
      res.value = value.value
    }
    const confirm = () => {
      result.value = res.value
      sub()
    }
    const clear = () => {
      cascader.value = ''
      result.value = []
      res.value = []
    }
    const cancel = () => {
      emit('update:show', false)
    }
    // 结束
    const sub = () => {
      emit('update:value', result.value)
      cancel()
    }
    const change = (option) => {
      emit('change', option)
    }
    const finish = ({tabIndex, selectedOptions}) => {
      if (tabIndex >= 2) {
        result.value = selectedOptions
        sub()
      } else {
        res.value = selectedOptions
      }
    }

    return {
      loading,
      result,
      data,
      title,
      visible,
      cascader,
      confirm,
      clear,
      cancel,
      change,
      finish,
      init
    }
  }
})
</script>
<style lang="less" scoped>
.c-area {
  position: relative;
  .load-box {
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-box {
    position: absolute;
    right: 0;
    top: 0;
    height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--van-padding-md);
    .clear,
    .confirm {
      font-size: 12px;
      color: #666;
    }
    .confirm {
      color: #1989fa;
      margin-left: 6px;
    }
  }
  .van-cascader {
    :deep(.van-cascader__header) {
      justify-content: center;
    }
    :deep(.van-cascader__title) {
      font-weight: 500;
      color: #434343;
    }
    :deep(.van-cascader__tab), :deep(.van-cascader__option--selected) {
      font-weight: 500;
    }
  }

}
</style>
